html {
	height: 100%;
}
.top-nav {
	height: 50px;
	line-height: 50px;
	.top-nav-list {
		border-bottom: 1px solid #eee;
		.top-nav-item {
			text-align: center;
			position: relative;
		}
		.top-nav-link {
			color: #9a9aaa;
			&.active {
				font-weight: 700;
				color: #429cff;
			}
		}
		.line {
			display: inline-block;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			width: 50px;
			height: 2px;
			background-color: #aad9f7;
		}
	}
}
#nav1 {
	height: 4rem;
}
.course {
	h4 {
		height: 2.5rem;
		line-height: 2.5rem;
	}
	.card-newcourse {
		.new {
			border-radius: 0.5rem;
			overflow: hidden;
			box-shadow: 2px 2px 13px 7px #ccc, -4px -3px 2px 0px #ccc;
			img {
				width: 100%;
				height: 8rem;
			}
			.title {
				padding: 0 0.625rem;
				box-sizing: border-box;
			}
			.desc {
				margin: 0.625rem 0;
				font-size: 0.75rem;
				padding: 0 0.625rem;
				box-sizing: border-box;
			}
		}
	}
	.card-course {
		.old {
			height: 8rem;
			color: white;
			margin-bottom: 1.125rem;
			border-radius: 0.5rem;
			overflow: hidden;
			position: relative;
			box-shadow: 4px 4px 8px 4px #ccc, -4px -3px 2px #ccc;
			img {
				width: 100%;
				height: 100%;
			}
			.title {
				width: 100%;
				padding-left: 0.625rem;
				position: absolute;
				bottom: 2.5rem;
			}
			.desc {
				width: 100%;

				font-size: 0.75rem;
				line-height: 1.875rem;
				padding-left: 0.625rem;
				position: absolute;
				bottom: 0.7rem;
			}
		}
	}
}
